<template>
    <div>
       即将上映
       <ul>
           <li v-for="data in dataList" :key="data.filmId" @click="handleChangePage(data)">
               <img :src="data.poster" alt="">
               <h3>{{data.name}}</h3>
               <p>观众评分 <span>{{data.grade}}</span></p>
               <p v-if="data.actors">主演: {{data.actors | actorFilter}}</p>
               <p v-else>暂无主演</p>
               <p>{{data.nation}} | {{data.runtime}}分钟</p>
           </li>
       </ul>
    </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'

Vue.filter('actorFilter', function(data) {
  // console.log(data)
  var arr = data.map(item => item.name)
  return arr.join(' ')
})
export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=9425722',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1599876974268306606981121","bc":"110100"}',
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      console.log(res.data)
      this.dataList = res.data.data.films
    })
  },
  methods: {
    handleChangePage(id) {
      console.log(id)
      // 编程式导航-路径跳转
      this.$router.push(`/detail/${id}`)

      // 编程式导航-名字跳转
      // this.$router.push({ name: 'moviedetail', params: { id: id } })
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  li {
    padding: 10px;
    overflow: hidden;
    img {
      width: 66px;
      float: left;
    }
    p {
      font-size: 13px;
      margin-top: 4px;
      color: #797d82;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      span {
        color: #ffb232;
        font-size: 14px;
      }
    }
  }
}
</style>
